package myJs.analysis

import myJs.Implicits._
import myJs.cps._
import myJs.myPkg.MyFetch
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks._
import slinky.web.html._

import scala.collection.immutable.SeqMap
import scala.scalajs.js
import scala.scalajs.js.Dynamic.{global => g}
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._
import typings.csstype.csstypeStrings

/**
 * Created by yz on 21/1/2022
 */
@react object AMFilterCp {

  case class Props(phenotypes: List[String], phenotypesChange: List[String] => Unit, datasets: List[String],
                   datasetsChange: List[String] => Unit, pName: String = "phenotypes", dName: String = "datasets",
                   models: List[String], modelsChange: List[String] => Unit, mName: String = "models",
                   datasetMap: SeqMap[String, String], modelMap: SeqMap[String, String])

  val initPhenotypes = List("Fetal", "Normal", "Fatty Liver", "NAFLD", "VH", "Fibrosis", "HCC", "HB", "DP", "IPN", "ICC")
  val phenotypeMap = initPhenotypes.optionMap

  val component = FunctionalComponent[Props] { props =>

    object FTool {

      def phenotypesChange = (vs: List[String]) => {
        props.phenotypesChange(vs)
      }

      def datasetsChange = (vs: List[String]) => {
        props.datasetsChange(vs)
      }

      def modelsChange = (vs: List[String]) => {
        props.modelsChange(vs)
      }

    }

    div(style := Style(width = "81%", display = csstypeStrings.flex),

      div(style := Style(width = 300, paddingLeft = 15, paddingRight = 15, display = csstypeStrings.flex,
        flexDirection = csstypeStrings.column),
        div(style := Style(width = "100%", paddingLeft = 0, paddingRight = 0), className := "col-sm-3",
          PureMultiSelectCp(optionMap = phenotypeMap, value = props.phenotypes, onChange = FTool.phenotypesChange,
            width = "100%", name = props.pName, allowClear = true, nSelectedText = " Phenotypes",
            allSelectedText = "All Phenotypes"),
        )
      ),

      div(style := Style(width = 300, paddingLeft = 15, paddingRight = 15, display = csstypeStrings.flex,
        flexDirection = csstypeStrings.column),
        div(style := Style(width = "100%", paddingLeft = 0, paddingRight = 0), className := "col-sm-3",
          PureMultiSelectCp(optionMap = props.datasetMap, value = props.datasets, onChange = FTool.datasetsChange,
            width = "100%", name = props.dName, allowClear = true, nSelectedText = " Datasets",
            allSelectedText = "All Datasets"),
        ),
      ),

      div(style := Style(width = 300, paddingLeft = 15, paddingRight = 15, display = csstypeStrings.flex,
        flexDirection = csstypeStrings.column),
        div(style := Style(width = "100%", paddingLeft = 0, paddingRight = 0), className := "col-sm-3",
          PureMultiSelectCp(optionMap = props.modelMap, value = props.models, onChange = FTool.modelsChange, name = props.mName,
            width = "100%", allowClear = true, nSelectedText = " Models",
            allSelectedText = "All Models"),
        )
      ),

    )


  }

  object STool {


  }

}
